<template>
  <div class="requestList">
    <tab active-color="#43A2FE" v-model="currentIndex">
      <tab-item v-for="(item, index) in list" :key="index" :selected="index===currentIndex">
        <span>{{item}}</span>
      </tab-item>
    </tab>
    <swiper ref="swiper" v-if="getAuth('expense:requestForm:query')" v-model="currentIndex" :show-dots="false" @on-index-change="setHeight">
      <swiper-item :key="123">
        <group ref="swiper_item" gutter="10px">
          <cell class="sub-item" value-align="left" :key="item.no" v-for="(item,index) in approvalList">
            <p>{{item.workOrderCode}}</p>
            <p>¥ {{_numberComma(item.fillAmount)}}</p>
            <span>{{_dateFormat(item.createdTime)}}
                <span>等待 {{getTrialsPersons(item)}} 审批</span>
              </span>
            <div slot="child"><span style="color:#43A2FE;font-size: 15px" @click="gotoRequestDetail(item.id,0)">查看</span></div>
          </cell>
        </group>
      </swiper-item>
      <swiper-item :key="456">
        <group ref="swiper_item" gutter="10px">
          <cell class="sub-item" value-align="left" :key="item.no" v-for="(item,index) in rejectList">
            <div slot="child" v-if="item.state==3" @click="gotoExpenseForm(item.id)"><i class="fa fa-edit"
                                                                   style="color:#43A2FE;font-size: 0.2rem"></i>
            </div>
            <p>{{item.workOrderCode}}<span v-if="item.state==3" style="margin-left: 20px;color: #E05163;">已驳回</span>
              <span v-else="item.state==3" style="margin-left: 20px">已批准</span>
            </p>
            <p>¥ {{_numberComma(item.trialAmount)}}</p>
            <span>{{_dateFormat(item.createdTime)}}</span>
            <div slot="child"><span style="color:#43A2FE;font-size: 15px" @click="gotoRequestDetail(item.id,1)">查看</span></div>
          </cell>
        </group>
      </swiper-item>
    </swiper>
    <div class="addOrder" @click="gotoExpenseForm()" v-if="getAuth('expense:requestForm:add')"></div>
  </div>
</template>

<script>
  import {
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Group,
    Cell,
    CellBox,
    CellFormPreview,
    Badge,
    Confirm,
    TransferDom
  } from 'vux'

  export default {
    name: "requestList",
    directives: {
      TransferDom
    },
    components: {
      Tab, TabItem, Swiper, SwiperItem, Group, Cell, CellBox, CellFormPreview, Badge, Confirm
    },
    data() {
      return {
        list: ['待审核', '已审核'],
        currentIndex: 0,
        approvalList: [],
        rejectList: [],
      }
    },
    mounted() {
      let params = {
        requestUserId: this.$store.state.user.userInfo.id,
        noPage: true,
        include: true,
        fields: 'id,createdTime,fillAmount,status,workOrderCode,trials,trialAmount'
      };
      this.$http.get('/expense/api/RequestForm', {params: params}).then(res => {
          res.data.data.forEach(item => {
            switch (item.status) {
              case 1://待审核
                this.approvalList.push(item);
                break;
              case 2:
              case 3://已审核
                this.rejectList.push(item);
                break;
            }
          });
        }
      )
      this.setHeight();
    },
    computed: {},
    methods: {
      // 申请单界面
      gotoRequestDetail(id,auth){
        this.$router.push({path: '/expense/CostApplyTrial', query: {id: id,type:1,auth:auth}})
      },
      // 获取当前审批人列表
      getTrialsPersons(data) {
        return data.trials.map(item => {
          return item.nickName
        }).join(',')
      },
      // 跳转申请单界面
      gotoExpenseForm(id) {
        this.$router.push({
          path:"createApplyForm",
          query:{id:id}
        });
      },
      //设置swapper高度
      setHeight() {
        this.$nextTick(() => {
          this.$refs.swiper.xheight = this.$refs.swiper_item.clientHeight + 'px'
        })
      },
    }
  }
</script>

<style lang="less">
  .requestList {
    .sub-item {
      .weui-cell__ft {
        span, p {
          font-size: 15px;
        }
      }
    }
    .after-title {
      color: #8e8e8e;
      margin-left: .15rem;
    }
    .vux-slider {
      position: absolute;
      left: 0;
      right: 0;
      top: 44px;
      bottom: 0;
      .vux-swiper {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        overflow-y: scroll;
        right: 0;
      }
    }
    .v-transfer-dom {
      .weui-dialog__btn_primary {
        color: #3FBCFC;
      }
    }
    .weui-cells {
      .weui-cell_access {
        .weui-cell__ft:after {
          border-color: #3FBCFC;
        }
      }
    }
    .addOrder{
      width: 0.5rem;
      height: 0.5rem;
      position: fixed;
      z-index: 2;
      bottom: 0.3rem;
      left: 50%;
      background: url("~assets/images4/icon-tianjiabaoxiao@2x.png") no-repeat;
      background-size: 100%;
      transform: translateX(-50%);
    }
  }


</style>
